<template>
  <div class="auth-user">
    <div class="container">
      <!-- 角色信息 -->
      <div class="roleInfo">
        <div class="title">
          <div class="icon"></div>
          {{ $t("system.RoleInformation") }}
        </div>
        <el-form :model="roleForm" label-width="100px">
          <el-form-item :label="$t('system.RoleName')" prop="roleName">
            <el-input disabled v-model="roleForm.roleName"></el-input>
          </el-form-item>
          <el-form-item :label="$t('system.Remark')">
            <el-input
              disabled
              v-model="roleForm.remark"
              placeholder="请输入备注说明"
              :rows="4"
              type="textarea"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>

      <!-- 角色成员 -->
      <div class="userTable">
        <div class="search-card">
          <div class="title">
            <div class="icon"></div>
            {{ $t("system.RoleMembers") }}
          </div>
          <el-button
            type="primary"
            plain
            icon="Plus"
            @click="openSelectUser"
            v-hasPermi="['system:role:add']"
            >{{ $t("system.AddMembers") }}</el-button
          >
        </div>

        <el-table
          v-loading="loading"
          :data="userList"
          max-height="280"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            :label="$t('system.SerialNo')"
            type="index"
            width="80"
            align="center"
          />
          <el-table-column
            :label="$t('system.UserName')"
            prop="userName"
            :show-overflow-tooltip="true"
            min-width="150"
            align="center"
          />
          <el-table-column
            :label="$t('system.FullName')"
            prop="nickName"
            :show-overflow-tooltip="true"
            min-width="150"
            align="center"
          />

          <el-table-column
            :label="$t('system.PhoneNumber')"
            prop="phonenumber"
            :show-overflow-tooltip="true"
            min-width="150"
            align="center"
          />
          <el-table-column
            :label="$t('system.Dept')"
            prop="dept"
            :show-overflow-tooltip="true"
            min-width="150"
            align="center"
          />
          <el-table-column
            :label="$t('system.Post')"
            prop="postIds"
            :show-overflow-tooltip="true"
            min-width="150"
            align="center"
          />
          <el-table-column
            :label="$t('system.Operate')"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="{ row }">
              <el-button
                link
                type="danger"
                @click="deletePrompt(row.userId, row.userName)"
                v-hasPermi="['system:role:remove']"
                >{{ $t("common.delete") }}</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getList"
        />
      </div>
    </div>

    <div class="footBtn">
      <div class="btn" @click="handleClose">
        {{ $t("common.close") }}
      </div>
    </div>

    <select-user
      ref="selectRef"
      :roleId="queryParams.roleId"
      @ok="handleQuery"
    />

    <!-- 删除弹出层 -->
    <el-dialog v-model="deleteVisible" class="no-header-dialog">
      <img src="@/assets/images/warn.png" alt="" />
      <div class="dec">
        确定删除该成员吗？删除后
        <span class="deletecolor">{{ deleteName }}</span> 不再拥有该角色权限
      </div>
      <div class="chooise">
        <div class="btn delete" @click="closeDelete">取消</div>
        <div class="btn success" @click="deleteApply">确定</div>
      </div>
    </el-dialog>
  </div>
</template>

<script setup name="AuthUser">
import { ElMessage } from "element-plus";
import selectUser from "./selectUser";
import {
  getRole,
  allocatedUserList,
  authUserCancel,
  authUserCancelAll,
} from "@/api/system/role";
import { onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";

const route = useRoute();
const router = useRouter();
const { proxy } = getCurrentInstance();
const { sys_normal_disable } = proxy.useDict("sys_normal_disable");

const userList = ref([]);
const loading = ref(true);
const showSearch = ref(true);
const multiple = ref(true);
const total = ref(0);
const userIds = ref([]);
const roleForm = ref({
  roleName: null,
  remark: null,
});

const queryParams = reactive({
  pageNum: 1,
  pageSize: 10,
  roleId: route.params.roleId,
  userName: undefined,
  phonenumber: undefined,
});

/** 查询授权用户列表 */
function getList() {
  loading.value = true;
  allocatedUserList(queryParams).then((response) => {
    userList.value = response.rows;
    total.value = response.total;
    loading.value = false;
  });
}
// 返回按钮
function handleClose() {
  const obj = { path: "/system/role" };
  router.push(obj);
  // proxy.$tab.closeOpenPage(obj);
}
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

// -------------------------------------------------  删除事件  -----------------------------------------------------

const deleteId = ref();
const deleteName = ref();
const deleteVisible = ref(false);

const deletePrompt = (id, name) => {
  deleteVisible.value = true;
  deleteId.value = id;
  deleteName.value = name;
};

const closeDelete = () => {
  deleteVisible.value = false;
  deleteId.value = null;
  deleteName.value = null;
};

const deleteApply = async () => {
  const res = await authUserCancel({
    userId: deleteId.value,
    roleId: queryParams.roleId,
  });
  if (res.code === 200) ElMessage.success(res.msg);
  else ElMessage.error(res.msg);
  getList();
  deleteVisible.value = false;
  deleteId.value = null;
  deleteName.value = null;
};

// 多选框选中数据
function handleSelectionChange(selection) {
  userIds.value = selection.map((item) => item.userId);
  multiple.value = !selection.length;
}
/** 打开授权用户表弹窗 */
function openSelectUser() {
  proxy.$refs["selectRef"].show();
}
/** 取消授权按钮操作 */
function cancelAuthUser(row) {
  proxy.$modal
    .confirm('确认要取消该用户"' + row.userName + '"角色吗？')
    .then(function () {
      return authUserCancel({ userId: row.userId, roleId: queryParams.roleId });
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
    })
    .catch(() => {});
}
/** 批量取消授权按钮操作 */
function cancelAuthUserAll(row) {
  const roleId = queryParams.roleId;
  const uIds = userIds.value.join(",");
  proxy.$modal
    .confirm("是否取消选中用户授权数据项?")
    .then(function () {
      return authUserCancelAll({ roleId: roleId, userIds: uIds });
    })
    .then(() => {
      getList();
      proxy.$modal.msgSuccess("取消授权成功");
    })
    .catch(() => {});
}

onMounted(async () => {
  getList();
  const { data } = await getRole(route.params.roleId);
  roleForm.value = data;
});
</script>

<style lang="scss" scoped>
.auth-user {
  width: 100%;
  height: 100%;
  position: relative;

  .container {
    position: relative;
    width: calc(100% - 40px);
    height: 92%;
    margin: 0 20px 20px;
    border-radius: 10px;
    background: white;
  }

  .roleInfo {
    padding: 30px;
    width: 100%;
    height: 248px;
    border-radius: 10px;
    background: white;

    .el-input,
    .el-textarea {
      width: 456px;
    }
  }

  .title {
    display: flex;
    align-items: center;
    margin-bottom: 30px;
    font-size: 16px;
    font-weight: 600;

    .icon {
      margin-right: 12px;
      width: 16px;
      height: 16px;
      background: url("@/assets/images/titleIcon.png");
    }
  }

  .userTable {
    // display: flex;
    // flex-direction: column;
    // justify-content: space-between;
    // align-items: center;
    background: #fff;
    height: 450px;

    .pagination-container {
      margin: 10px 0 !important;
    }
  }

  .search-card {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: flex-start;
    padding: 30px;
    width: 100%;
    height: 133px;
    background-color: #fff;

    .el-button {
      width: 106px;
      height: 40px;
      opacity: 1;
      border-radius: 4px;
      background: rgba(43, 193, 123, 1);
      border: 1px solid rgba(43, 193, 123, 1);
      font-size: 14px;
      color: white;
    }
  }

  .footBtn {
    position: absolute;
    right: 20px;
    top: -45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 40px;
    .btn {
      width: 81px;
      height: 32px;
      line-height: 32px;
      text-align: center;
      border-radius: 4px;
      color: #fff;
      background: rgba(43, 193, 123, 1);
      cursor: pointer;
      &:hover {
        background: rgba(43, 193, 123, 0.85);
      }
    }
  }
}
</style>
